<template>
  <view class="detail-view">
    <u-form label-width="150" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item required label="关联采购单" prop="warehouseName">
          <u-input
            @click="goPage('/pagesT/order/selPurchase')"
            class="dis-input"
            disabled
            v-model="add_form.originNo"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <block v-if="!!add_form.originNo">
          <u-form-item label="退货仓库">
            <view class="form-value">{{ add_form.warehouseName }}</view>
          </u-form-item>
          <u-form-item label="供应商">
            <view class="form-value">{{ add_form.supplierName }}</view>
          </u-form-item>
          <u-form-item label="采购员">
            <view class="form-value">{{ add_form.buyerName }}</view>
          </u-form-item>
        </block>
      </view>
      <view class="form-model-view">
        <u-form-item required label="商品清单">
          <view @click="selGoodsPage" class="form-value add-btn-go">
            <u-icon name="plus" size="24" color="#fb5904"></u-icon>
            <text class="form-value add-text">选择商品</text>
          </view>
        </u-form-item>
        <view class="goods-ul" v-if="goods_list.length">
          <block v-for="(item, index) in goods_list" :key="index">
            <view class="goods-li clearfix">
              <view class="goods-img float_left">
                <u-icon
                  size="40"
                  name="shangpin"
                  custom-prefix="custom-icon"
                  color="#cccccc"
                ></u-icon>
              </view>
              <view class="del-icon" @click="delGoods(index, item)">
                <u-icon
                  size="40"
                  name="minus-circle-fill"
                  color="#fb5904"
                ></u-icon>
              </view>
              <view class="float_left info">
                <view class="goods-name ellipsis">{{ item.goodsName }}</view>
                <view class="goods-code">{{ item.goodsCode }}</view>
                <view class="goods-num clearfix">
                  <view class="float_left"
                    >{{ item.unitName }};{{ item.skuName }}</view
                  >
                  <text class="float_right"
                    >可退：{{ $utils.formatNub(item.returnOnNum)
                    }}{{ item.unitName }}</text
                  >
                </view>
                <view class="goods-num clearfix">
                  <view class="float_left">
                    <text class="price">{{
                      $utils.formattedNumber(item.buyerUnitPrice)
                    }}</text>
                    <text style="margin: 0 10rpx">x</text>
                    <input
                      type="digit"
                      @blur="buyerNumChange(index)"
                      placeholder="退货数量"
                      v-model="item.buyerNum"
                    />
                  </view>
                  <view class="float_right">
                    小计：
                    <text class="price">{{
                      $utils.formattedNumber(item.subtotalPrice)
                    }}</text>
                  </view>
                </view>
                <view class="goods-num clearfix" v-if="item.isEq === 5">
                  <view class="float_left">
                    <input
                      type="digit"
                      @blur="buyerNumChange(index)"
                      placeholder="其他单位"
                      v-model="item.otherNum"
                    />
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
      <view class="form-model-view">
        <u-form-item label="其他金额"
          ><input
            type="digit"
            v-model="add_form.otherAmount"
            placeholder="请输入"
          />
        </u-form-item>
        <u-form-item label="退货金额"
          ><input type="digit" v-model="purchaseAmount" placeholder="请输入" />
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item label="备注" label-position="top">
          <u-input type="textarea" v-model="add_form.remark" />
        </u-form-item>
      </view>
    </u-form>
    <view class="detail-bottom">
      <view class="handel-btn" @click="submit">提交</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      purchaseData: "",
      pusrchaseOut_id: "",
      goods_list: [],
      goodsArrData: [],
      deleteArray: [],
      purchaseGoodsData: [],
      add_form: {
        originId: "",
        originNo: "",
        supplierId: "",
        supplierName: "",
        warehouseId: "",
        warehouseName: "",
        buyerId: "",
        buyerName: "",
        operatorName: "",
        couponAmount: "",
        otherAmount: "",
        remark: "",
        goodsData: [],
        shopId: "",
        shopName: "",
      },
    };
  },
  watch: {
    purchaseData(val) {
      if (val) {
        this.selpurchase(val);
      }
    },
    purchaseGoodsData(val) {
      if (val) {
        this.goods_list = val;
      }
    },
  },
  computed: {
    userName() {
      return this.$store.state.userInfo.name;
    },
    purchaseAmount() {
      let sum = 0;
      if (this.goods_list.length > 1) {
        this.goods_list.forEach((item) => {
          sum = this.$NP.plus(sum, Number(item.subtotalPrice));
        });
      } else if (this.goods_list.length === 1) {
        sum = Number(this.goods_list[0].subtotalPrice);
      } else {
        sum = 0;
      }
      return this.$NP.plus(sum, this.add_form.otherAmount);
    },
  },
  onLoad(options) {
    if (options.id) {
      this.pusrchaseOut_id = options.id;
      uni.setNavigationBarTitle({
        title: "编辑采购退货单",
      });
      this.getPurchaseOutInfoById();
    }
  },
  methods: {
    // 详情
    getPurchaseOutInfoById() {
      this.$u.api
        .getPurchaseOutInfoById(this.pusrchaseOut_id)
        .then(({ data }) => {
          this.add_form.warehouseName = data.warehouseName;
          this.add_form.warehouseId = data.warehouseId;
          this.add_form.originId = data.originId;
          this.add_form.originNo = data.originNo;
          this.add_form.shopId = data.shopId;
          this.add_form.shopName = data.shopName;
          this.add_form.supplierId = data.supplierId;
          this.add_form.supplierName = data.supplierName;
          this.add_form.buyerId = data.buyerId;
          this.add_form.buyerName = data.buyerName;
          this.add_form.operatorName = data.operatorName;
          this.add_form.couponAmount = data.couponAmount;
          this.add_form.otherAmount = data.otherAmount;
          this.add_form.remark = data.remark;
          this.goods_list = data.details.map((item) => {
            return {
              ...item,
              buyerNum: Number(item.buyerNum),
            };
          });
          this.getPurchaseInfoById(data.originId, data.warehouseId, "detail");
        });
    },
    selGoodsPage() {
      const obj = {
        goodsArrData: this.goodsArrData,
        goods_list: this.goods_list,
      };
      uni.setStorageSync("purchaseGoods", obj);
      this.goPage("/pagesT/order/purchaseGoods");
    },
    buyerNumChange(index) {
      const target = this.$u.deepClone(this.goods_list);
      if (Number(target[index].buyerNum) > Number(target[index].returnOnNum)) {
        target[index].buyerNum = this.$utils.formatNub(
          target[index].returnOnNum
        );
      }
      target[index].subtotalPrice = this.$NP.times(
        target[index].buyerNum,
        target[index].buyerUnitPrice
      );
      this.goods_list = target;
    },
    submit() {
      if (!this.add_form.originNo) {
        this.$u.toast("请选择关联的采购单");
        return;
      }
      if (!this.goods_list) {
        this.$u.toast("请选择退货商品");
        return;
      }
      const params = {
        ...this.add_form,
        deleteArray: this.deleteArray,
        goodsData: this.$u.deepClone(this.goods_list).map((item) => {
          delete item.num;
          if (!this.pusrchaseOut_id) {
            delete item.id;
          }
          return item;
        }),
      };

      if (this.pusrchaseOut_id) {
        this.$u.api
          .editPurchaseOut(this.pusrchaseOut_id, params)
          .then((res) => {
            this.$u.toast("编辑成功");
            uni.navigateBack();
          });
      } else {
        (params.operatorName = this.userName),
          this.$u.api.addPurchaseOut(params).then((res) => {
            this.$u.toast("提交成功");
            uni.navigateBack();
          });
      }
    },
    // 选择采购单 selpurchase
    selpurchase(val) {
      const id = val.id;
      const warehouseId = val.warehouseId;
      this.getPurchaseInfoById(id, warehouseId);
      this.add_form.originId = val.id;
      this.add_form.originNo = val.no;
      this.add_form.shopId = val.shopId;
      this.add_form.shopName = val.shopName;
      this.add_form.buyerId = val.buyerId;
      this.add_form.buyerName = val.buyerName;
      this.add_form.remark = val.remark;
      this.add_form.supplierId = val.supplierId;
      this.add_form.supplierName = val.supplierName;
      this.add_form.warehouseName = val.warehouseName;
      this.add_form.warehouseId = val.warehouseId;
    },
    //  获取采购单详情
    async getPurchaseInfoById(id, warehouseId, isdetail) {
      this.$u.api
        .getPurchaseAndBatchInfoById({
          id: id,
          warehouseId: warehouseId,
        })
        .then(({ data }) => {
          if (!isdetail) {
            this.goods_list = data.map((item) => {
              return {
                id: item.id,
                goodsId: item.basicGoodsId,
                goodsCode: item.goodsCode,
                goodsName: item.goodsName,
                unitName: item.unitName,
                skuName: item.skuName,
                skuId: item.skuId,
                purchaseNum: this.$utils.formatNub(item.buyerNum),
                buyerNum: this.$utils.formatNub(item.returnOnNum),
                inNum: item.inNum,
                inOfNum: item.inOfNum,
                returnOnNum: item.returnOnNum,
                returnNum: item.returnNum,
                inventoryNum: this.$utils.formatNub(item.num),
                buyerUnitPrice: this.$utils.formatNub(item.buyerUnitPrice),
                subtotalPrice: this.$utils.formatNub(item.subtotalPrice),
                couponAmount: this.$utils.formatNub(item.couponAmount),
                otherAmount: this.$utils.formatNub(item.otherAmount),
                isEq: item.isEq,
                otherNum: item.otherNum,
              };
            });
          }
          console.log(this.goods_list);
          this.goodsArrData = data;
        });
    },
    delGoods(index, row) {
      if (this.goods_list.length === 1) {
        this.$u.toast("至少保留一条数据");
        return;
      }
      if (row.id) {
        this.deleteArray.push(row.id);
      }
      this.goods_list.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-ul {
  padding-top: 10rpx;

  .more-goods {
    line-height: 80rpx;
    border-top: 1px solid #eeeeee;
    text-align: center;
    font-size: 24rpx;
  }

  .goods-title {
    margin-bottom: 20rpx;
    line-height: 80rpx;
    font-size: 24rpx;
    border-bottom: 1px solid #eeeeee;

    .float_right {
      color: $uni-color-primary;
    }
  }

  .goods-li {
    line-height: 32rpx;
    padding-bottom: 24rpx;
    position: relative;

    .del-icon {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    .goods-img {
      margin-right: 20rpx;

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 8rpx;
        display: block;
      }
    }

    .info {
      width: 640rpx;

      .goods-name {
        width: 640rpx;
        height: 34rpx;
        line-height: 34rpx;
      }

      .goods-code {
        font-size: 24rpx;
        padding-top: 10rpx;
      }

      .goods-num {
        padding-top: 10rpx;
        font-size: 24rpx;

        .float_left {
          input {
            display: inline-block;
            border: 1px solid #eeeeee;
            border-radius: 10rpx;
            padding: 0 10rpx;
            vertical-align: middle;
            text-align: center;
          }
        }

        .price {
          font-size: 28rpx;
          font-weight: bold;
          color: $uni-color-error;
        }
      }
    }
  }
}
.form-value {
  .add-text {
    color: #fb5904;
  }
}
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
